
<!-- saved from url=(0071)http://www1.pcauto.com.cn/zt/pcauto20160111/areaData/areaDataOther.html -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	
	<title>省市区县镇级联数据JS版</title>
</head>
<body>
	<div id="main" style="width:1000px;margin:30px auto;">
		<h2 style="text-align:center">省市区县镇级联数据JS版</h2>
		<p><span style="font-weight:bold">前言</span>：做专题经常会涉及到报名，报名通常就会有地区级联的要求，如下所示。因为销售提供的数据都不完整或者干脆都不提供，在网上也找不到现成的数据。昨天鼓捣出一份数据，分享下。</p>
		<p style="font-weight:bold">ps：如果数据的名称与文件中已有的名称冲突，请自行修改。</p>
		<p>
			</p><div>
				<select id="proS" onchange="loadCity()">
					<option value="0">请选择</option>
				<option value="1">北京</option><option value="2">上海</option><option value="3">天津</option><option value="4">重庆</option><option value="5">河北</option><option value="6">山西</option><option value="7">河南</option><option value="8">辽宁</option><option value="9">吉林</option><option value="10">黑龙江</option><option value="11">内蒙古</option><option value="12">江苏</option><option value="13">山东</option><option value="14">安徽</option><option value="15">浙江</option><option value="16">福建</option><option value="17">湖北</option><option value="18">湖南</option><option value="19">广东</option><option value="20">广西</option><option value="21">江西</option><option value="22">四川</option><option value="23">海南</option><option value="24">贵州</option><option value="25">云南</option><option value="26">西藏</option><option value="27">陕西</option><option value="28">甘肃</option><option value="29">青海</option><option value="30">宁夏</option><option value="31">新疆</option><option value="32">台湾</option><option value="42">香港</option><option value="43">澳门</option></select>
				<select id="cityS" onchange="loadCounty()">
					<option value="0">请选择</option>
				</select>
				<select id="countryS" onchange="loadTown()">
					<option value="0">请选择</option>
				</select>
				<select id="townS">
					<option value="0">请选择</option>
				</select>
			</div>
		<p></p>

		<h3>1、省市数据(15k)</h3>
		<p>地址：<a target="_blank" href="http://www1.pcauto.com.cn/zt/pcauto20160111/areaData/proCity.js">http://www1.pcauto.com.cn/zt/pcauto20160111/areaData/proCity.js</a></p>
		<h3>1、省市县数据(172k)</h3>
		<p>地址：<a target="_blank" href="./select_files/proCityCountry.js.下载">http://www1.pcauto.com.cn/zt/pcauto20160111/areaData/proCityCountry.js</a></p>
		<h3>2、省市县乡数据(1545k)</h3>
		<p>地址：<a target="_blank" href="http://www1.pcauto.com.cn/zt/pcauto20160111/areaData/proCityCountryTown.js">http://www1.pcauto.com.cn/zt/pcauto20160111/areaData/proCityCountryTown.js</a></p>
		<p style="font-weight:bold">以下把各个数据整理成单独文件，方便组合使用</p>
		<h3>3、省(1k)</h3>
		<p>地址：<a target="_blank" href="http://www1.pcauto.com.cn/zt/pcauto20160111/areaData/pro.js">http://www1.pcauto.com.cn/zt/pcauto20160111/areaData/pro.js</a></p>
		<h3>4、市(14k)</h3>
		<p>地址：<a target="_blank" href="http://www1.pcauto.com.cn/zt/pcauto20160111/areaData/city.js">http://www1.pcauto.com.cn/zt/pcauto20160111/areaData/city.js</a></p>
		<h3>5、县(159k)</h3>
		<p>地址：<a target="_blank" href="http://www1.pcauto.com.cn/zt/pcauto20160111/areaData/country.js">http://www1.pcauto.com.cn/zt/pcauto20160111/areaData/country.js</a></p>
		<h3>6、乡镇数据(1373k)</h3>
		<p>地址：<a target="_blank" href="select_files/town.js">http://www1.pcauto.com.cn/zt/pcauto20160111/areaData/town.js</a></p>
		<p style="color:red">当级别到乡的时候数据已经很大了，有1m多，不应该把js文件一次性加载进来，这样会拖慢页面的加载时间，采用分次加载比较好。比如先加载proCityCountry.js,页面加载完之后在加载town.js；当然这仅仅是初步的优化，还可以优化更多。以上仅仅是参考意见，各位示情况而用。</p>
		<!-- 示例程序  -->
		<script src="select_files/proCityCountry.js"></script>
		<script async="" src="select_files/town.js"></script>
		<script type="text/javascript">
			//非盈利性分享，如果侵犯了你的权益，请知会马上删除。希望多多支持
			var proS=document.getElementById("proS"),cityS=document.getElementById("cityS"),countryS=document.getElementById("countryS"),townS=document.getElementById("townS")
			function loadProvince(){
				var tempFragment = document.createDocumentFragment();
				for(var i=0;i<proData_.length;i++){
					var option=document.createElement("option");
					option.setAttribute("value",proData_[i].pk);
					option.innerHTML=proData_[i].pv;
					tempFragment.appendChild(option);
				}
				//使用dom碎片，减少对dom的重复操作
				proS.appendChild(tempFragment);
			}
			function loadCity(){
				if(proS.value==0){
					return;
				}else{
					cityS.innerHTML="<option value='0'>请选择</option>";
					countryS.innerHTML="<option value='0'>请选择</option>";
					townS.innerHTML="<option value='0'>请选择</option>";
					var hasFound=false;
					var tempFragment = document.createDocumentFragment();
					for(var i=0;i<cityData_.length;i++){
						if(proS.value==cityData_[i].pk){
							hasFound=true;
							var option=document.createElement("option");
							option.setAttribute("value",cityData_[i].ck);
							option.innerHTML=cityData_[i].cv;
							tempFragment.appendChild(option);
							
						}else{
							//需要查找的数据都是放一块的，如果匹配过，又出现不匹配，那么之后数据肯定都是不匹配的。可以pass掉，减少循环次数
							if(hasFound){
								break;
							}
						}
					}
					cityS.appendChild(tempFragment);
				}
				
			}
			function loadCounty(){
				if(cityS.value==0){
					return;
				}else{
					countryS.innerHTML="<option value='0'>请选择</option>";
					townS.innerHTML="<option value='0'>请选择</option>";
					var hasFound=false;
					var tempFragment = document.createDocumentFragment();
					for(var i=0;i<countryData_.length;i++){
						if(cityS.value==countryData_[i].ck){
							hasFound=true;
							var option=document.createElement("option");
							option.setAttribute("value",countryData_[i].cyk);
							option.innerHTML=countryData_[i].cyv;
							tempFragment.appendChild(option);
							
						}else{
							if(hasFound){
								break;
							}
						}
					}
					countryS.appendChild(tempFragment);
				}
			}

			function loadTown(){
				if(countryS.value==0){
					return;
				}else{
					townS.innerHTML="<option value='0'>请选择</option>";
					var hasFound=false;
					var tempFragment = document.createDocumentFragment();
					for(var i=0;i<townData_.length;i++){
						if(countryS.value==townData_[i].cyk){
							hasFound=true;
							var option=document.createElement("option");
							option.setAttribute("value",townData_[i].tk);
							option.innerHTML=townData_[i].tv;
							tempFragment.appendChild(option);
							
						}else{
							if(hasFound){
								break;
							}
						}
					}
					townS.appendChild(tempFragment);
				}
			}
			loadProvince();

		</script>
		
		
	</div>

</body></html>